<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <el-row :gutter="20">
      <!-- 树结构 -->
      <el-col :xs="24" :sm="4" :lg="4">
        <div class="grid-left">
          <!-- 筛选框 -->
          <el-input
            class="searchinput"
            placeholder="请搜索楼层"
            suffix-icon="el-input__icon el-icon-search"
            v-model="treeinput"
            clearable
            size="small"
          ></el-input>
          <!-- 树结构 -->
          <el-tree
            :data="treedata"
            :props="defaultProps"
            @node-click="handleNodeClick"
            ref="menuTree"
            node-key="id"
            default-expand-all
            :filter-node-method="filterNode"
          >
            <span slot-scope="{ node }" style="font-size: 14px">
              {{ node.label }}
              <el-tag
                type="danger"
                size="mini"
                v-if="sirentotal && node.key == 3"
                >{{ sirentotal }}</el-tag
              >
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 点位模块 -->
      <el-col :xs="24" :sm="20" :lg="20">
        <div class="grid-right">
          <!-- 生成画布模块 -->
          <div class="canvas-box" v-show="this.canvasinit">
            <!-- 表头 -->
            <div class="canvas-title">
              <div class="zuo">
                <i></i>
                <p>风过无痕 一楼 平面图</p>
              </div>
              <div class="button-dispose">
                <el-button size="small" type="success" @click="simulation"
                  >模拟报警</el-button
                >
                <el-button size="small" type="danger" @click="stopcall"
                  >停止报警</el-button
                >
              </div>
            </div>
            <!-- 画布 -->
            <!-- @mousewheel="canvasMouseWhell" -->
            <div id="canvas-boxitem">
              <canvas
                ref="canvas"
                width="1355"
                height="525"
                @mousedown="canvasMouseDown"
                @mousemove="canvasMouseMove"
                @mouseup="canvasMouseUp"
              ></canvas>
            </div>
          </div>
          <!-- 图标提示信息 -->
          <el-popover
            placement="top"
            id="popovercan"
            width="200"
            v-model="canvasvisible"
          >
            <div class="popover-top">
              <i>传感器设备</i>
              <!-- <div class="popover-title" @click="deletenew">
                <i class="el-icon-delete"></i>
              </div> -->
            </div>
            <p>序列号:sjhdkjshkj</p>
            <p>设备类型：是给大家灰色轨迹</p>
            <p></p>
          </el-popover>
          <!-- 闪光特效 -->
          <div
            v-for="item in sirendata"
            :id="'flashbox' + item.id"
            :key="item.id"
            :class="{ flashbox: flashswtich }"
            :style="{
              position: 'absolute',
              top: item.y + Number(46) + 'px',
              left: item.x + newValsidebar + Number(24) + 'px',
              zIndex: '-1'
            }"
          >
            <div
              v-if="item.sum"
              :style="{
                position: 'absolute',
                width: 20 + 'px',
                height: 20 + 'px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                background: '#fff',
                top: -10 + 'px',
                right: -10 + 'px',
                borderRadius: '50%',
                color: 'red',
                fontSize: 15 + 'px'
              }"
            >
              {{ item.sum }}
            </div>
          </div>

          <!-- 报警信息 -->
          <div class="table-fault" :class="{ tablefaults: istablefaults }">
            <!-- 搜索 -->
            <el-form
              class="search"
              :inline="true"
              :model="pageInfo"
              size="mini"
            >
              <el-form-item label="单位名称:">
                <el-input
                  v-model="pageInfo.clientName"
                  @keyup.enter.native="minedata"
                  placeholder="请输入单位名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="客户联系人:">
                <el-input
                  v-model="pageInfo.contactName"
                  @keyup.enter.native="minedata"
                  placeholder="请输入客户联系人"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="onSubmit"
                  icon="el-icon-search"
                  type="primary"
                  >查询</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  type="resetQuery"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 表格  -->
            <div class="table">
              <el-table
                :data="tableData"
                border
                stripe
                size="mini"
                height="100%"
              >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="序号" width="50" align="center">
                  <template slot-scope="scope">
                    {{
                      (pageInfo.pageNo - 1) * pageInfo.pageSize +
                        scope.$index +
                        1
                    }}
                  </template>
                </el-table-column>
                <!-- <af-table-column
                  prop="clientName"
                  label="单位名称"
                  align="center"
                >
                </af-table-column> -->
                <el-table-column
                  prop="clientAreaName"
                  label="所属区域"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactName"
                  label="客户联系人"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactPhone"
                  label="客户联系电话"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactName"
                  label="客户联系人"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactPhone"
                  label="客户联系电话"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactName"
                  label="客户联系人"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="contactPhone"
                  label="客户联系电话"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="180"
                  align="center"
                  fixed="right"
                >
                  <template v-slot="{ row }">
                    <el-button
                      type="primary"
                      @click="examine(row.id)"
                      size="mini"
                      >查看信息</el-button
                    >
                    <el-button type="danger" size="mini" @click="remove(row.id)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页  -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNo"
              :page-sizes="[15, 30, 50, 100]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
            <!-- 图标开关  -->
            <div class="fault-icon" @click="swtichtablefaults">
              <i
                :class="[
                  istablefaults ? 'el-icon-arrow-up ' : 'el-icon-arrow-down '
                ]"
              ></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 测试api
// import { getFloorTree } from "@/api/floor";
import { mapGetters } from 'vuex'
export default {
  name: 'Malfunctioncenter',
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    treeinput (val) {
      this.$refs.menuTree.filter(val)
    },
    screenWidth: {
      immediate: true,
      handler: function (newVal) {
        console.log('浏览器大小', newVal)
        if (newVal != 1920) {
          // console.log('执行了', newVal != 1980)
          this.windowlen = true
        }
      }
    },
    sidebar: {
      deep: true,
      handler (newVal) {
        console.log(newVal)
        // 用户收缩侧边栏
        if (newVal.opened) {
          this.newValsidebar = 0
        } else {
          console.log('执行收缩了')
          this.newValsidebar = 64
        }
        // 关闭设备详情开关
        this.canvasvisible = false
        // 关闭动画提示
        this.flashswtich = false
      }
    }
  },
  data () {
    return {
      // 树结构筛选框
      treeinput: '',
      // 树结构数据
      treedata: [
        {
          id: 0,
          name: '风过无痕',
          children: [
            {
              id: 1,
              name: '一号大楼',
              children: [
                {
                  id: 3,
                  name: '一楼'
                },
                {
                  id: 4,
                  name: '二楼'
                }
              ]
            },
            {
              id: 2,
              name: '二号大楼',
              children: [
                {
                  id: 5,
                  name: '一楼'
                },
                {
                  id: 6,
                  name: '二楼'
                }
              ]
            }
          ]
        }
      ],
      // 树结构配置
      // 树形数据分析
      defaultProps: {
        id: 'id',
        label: 'name',
        children: 'children'
      },
      // 保存点位
      canvaspage: {
        // 楼层id
        floorId: null,
        // 保存移动的点位数据
        backgroundImgs: null,
        // 背景图片
        canvasSensorImg: '',
        // 控制传感器显示
        sensorImgs: ''
      },
      // 获取canvas标签
      canvas: null,
      // 创建画布
      ctx: null,
      // 画布大小
      canvasWidth: 1355,
      canvasHeight: 525,
      //定时器
      intervalId: null,
      //判断鼠标是否点击
      isClick: false,
      //记录需要移动的图片的开光
      index: -1,
      //画布渲染帧数
      frameNumber: 20,
      //背景缩放比例
      imgScale: 1.0,
      //背景拖动速度
      imgMove: 20,
      // 图标
      sensorImgList: [],
      // 画布背景图
      backgroundImg: {
        url:
          'https://img.thgykj.com/thgy-file/fcf48a82a47f479d92792a232cef82291709023241210.jpg',
        x: 0,
        y: 0,
        width: 1355,
        height: 525
      },
      // 传感器中的图片
      canvasSensorImg: [
        {
          id: 1,
          channelId: 12,
          height: 35,
          url:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          width: 35,
          x: 400,
          y: 400,
          sum: 2
        },
        {
          id: 2,
          channelId: 13,
          height: 35,
          url:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          width: 35,
          x: 500,
          y: 200,
          sum: 5
        },
        {
          address: null,
          createTime: 1694247010000,
          creator: null,
          deviceId: '587644393081876',
          deviceName: '222',
          floorId: '47136767',
          height: 35,
          id: 152,
          imei: null,
          message: null,
          serial: null,
          status: null,
          time: null,
          type: null,
          typeName: '用户信息传输装置',
          update: null,
          updateTime: 1694247010000,
          url:
            'https://img.thgykj.com/thgy-file/61771a3ee1064c16891ed7e2ceb26d361692242551030.png',
          urls: null,
          width: 35,
          x: '468.30',
          y: '165.38',
          sum: 5
        }
      ],
      // 报警闪烁
      sirendata: [
        {
          id: 1,
          channelId: 12,
          height: 35,
          url:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          width: 35,
          x: 400,
          y: 400,
          sum: 2
        },
        {
          id: 2,
          channelId: 13,
          height: 35,
          url:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          width: 35,
          x: 500,
          y: 200,
          sum: 5
        }
      ],
      // 传感器数据
      tableData: [
        {
          id: 1,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 2,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 3,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 4,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 5,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 1,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 2,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 3,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 4,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 5,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 1,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 2,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 3,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 4,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        },
        {
          id: 5,
          img:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          name: 'thgy',
          phone: '865566043823044',
          newtype: 'NP-FDY100-N',
          sys: '福州市鼓楼区软件园D区科技公司二楼'
        }
      ],
      // 传感器id
      sensorshow: [],
      // 图标数据
      Icondata:
        'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
      // 报警数据
      callIcondata:
        'https://img.thgykj.com/thgy-file/de0aa00143f44862a1a10932dd547f391692585808616.png',
      // 背景图图片
      backpicture:
        'http://192.168.2.6:9000/mediafiles/2023/05/30/8303c39be3a3353a43119d684e7fc759.jpg',
      // 笔记本开关
      windowlen: false,
      // 监听是否在笔记本上
      screenWidth: document.body.clientWidth,
      // 画布开关
      canvasinit: false,
      // 设备抱紧查询
      pageInfo: {
        // 总条数
        total: 17,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 10
      },
      // 点击图片
      clickicon: {},
      // 图标开关
      canvasvisible: false,
      // 付费开关
      istablefaults: false,
      // 报警闪光开关
      flashswtich: false,
      // 侧边栏的收缩
      newValsidebar: 0,
      // 适配视口
      windowsAdaptive: '1355',
      // 报警闪烁
      newflicker: 0,
      // 报警总数
      sirentotal: null
    }
  },
  created () {
    // 获取楼层数据
    this.getFloordata()
    console.log('侧边栏', this.sidebar)
    if (!this.sidebar.opened) {
      console.log('执行收缩了')
      this.newValsidebar = 64
    }
  },
  mounted () {
    // 获取点位信息
    this.getcanvasdata()
    this.$nextTick(() => {
      this.$refs.menuTree.setCurrentKey(3)
    })
  },
  methods: {
    // 模拟报警
    simulation () {
      if (this.canvas !== null && this.canvasSensorImg.length > 0) {
        this.canvasSensorImg.forEach(v => {
          v.url = this.callIcondata
        })
        if (this.windowsAdaptive <= 1084) {
          console.log('执行笔记本125%缩放')
          this.sirendata.forEach(v => {
            // v.x = v.x * 1.118 - 11 - this.newflicker
            v.x = v.x * 0.8 - 4
            v.y = v.y * 0.78 - 5
            let a = 'flashbox' + v.id
            const canflash = document.getElementById(a)
            canflash.style.zIndex = 1
          })
        } else if (this.windowsAdaptive == 903.333) {
          console.log('电视')
          this.sirendata.forEach(v => {
            v.x = v.x * 0.98
            v.y = v.y * 0.68
            let a = 'flashbox' + v.id
            const canflash = document.getElementById(a)
            canflash.style.width = 45 + 'px'
            canflash.style.height = 45 + 'px'
            canflash.style.zIndex = 1
          })
        } else if (this.windowsAdaptive <= 1355) {
          console.log('1920*1080')
          this.sirendata.forEach(v => {
            v.x = v.x - 4
            let a = 'flashbox' + v.id
            const canflash = document.getElementById(a)
            canflash.style.zIndex = 1
          })
        }
      }
      // 报警总数
      this.sirentotal = 7
      this.flashswtich = true
    },
    stopcall () {
      this.canvasSensorImg.forEach(v => {
        v.url = this.Icondata
        let a = 'flashbox' + v.id
        const canflash = document.getElementById(a)
        canflash.style.zIndex = -1
      })
      this.sirentotal = null
      this.flashswtich = false
    },
    // 获取点位信息
    getcanvasdata () {
      // 打开画布
      this.canvasinit = true
      // 加载画布
      this.init()
    },
    // 树结构点击事件
    handleNodeClick (data) {
      if (data.children.length !== 0) {
        return
      }
      console.log('树形结构', data)
      console.log(data.id)
      // 楼层id
      this.page.floorId = data.id
      // 查询楼层点位
      //   this.floorpt()
      //   this.sensordata()
    },
    // 树节点搜索
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 获取楼层数据
    async getFloordata () {
      // const res = await getFloorTree()
      // console.log('楼层数据', res)
      // this.treedata = res.data
    },
    // 搜索按钮
    async onSubmit () {
      this.pageInfo.pageNo = 1
      await this.minedata()
      await this.$message.success('搜索成功')
    },
    // 重置方法
    resetQuery () {
      // 单位名称
      this.pageInfo.clientName = null
      // 状态
      this.pageInfo.clientClassifyId = null
      // 联系人
      this.pageInfo.contactName = null
      // 区域
      this.pageInfo.clientAreaId = null
      this.minedata()
      this.$message.success('数据重置成功')
    },
    // 分页 左右 点击 输入
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      //   this.minedata()
    },
    // 分页多少条点击事件
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.pageNo = val
      //   this.minedata()
    },

    // 创建画布
    init () {
      // 获取设备标签
      let canvasfa = document.getElementById('canvas-boxitem')
      let x = window.getComputedStyle(canvasfa).getPropertyValue('width')
      let y = window.getComputedStyle(canvasfa).getPropertyValue('height')
      let wx = Number(x.slice(0, -2))
      let wy = Number(y.slice(0, -2))

      // 找到画布标签
      this.canvas = this.$refs.canvas

      // 设置画布宽高
      this.canvas.width = wx
      this.canvas.height = wy
      // 判断笔记本上运行
      //   if (this.windowlen) {
      //     // console.log('笔记本浏览', this.windowlen)
      //     this.canvas.width = 780
      //     this.canvas.height = 435
      //     this.canvasWidth = 780
      //     this.canvasHeight = 435
      //     this.backgroundImg.width = 780
      //     this.backgroundImg.height = 435
      //   }
      this.ctx = this.canvas.getContext('2d')

      // 设置背景图
      this.backgroundImg.width = wx
      this.backgroundImg.height = wy

      this.windowsAdaptive = wx

      // 创建背景，图标，移动图标
      this.loadBgImg()
      // 刷新画布
      this.dataRefreh()
    },
    //加载背景图片
    loadBgImg () {
      let img = new Image()
      let bgImg = this.backgroundImg
      img.src = bgImg.url
      // console.log(this.valueUrl);
      //绘制所有图片
      img.onload = () => {
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        this.ctx.drawImage(
          img,
          bgImg.x,
          bgImg.y,
          bgImg.width * this.imgScale,
          bgImg.height * this.imgScale
        )
        this.drawCanvasSensorImg()
      }
    },

    //绘制图片方法
    drawImg (imgList) {
      for (let i = 0; i < imgList.length; i++) {
        this.ctx.drawImage(
          imgList[i].img,
          imgList[i].x * this.imgScale,
          imgList[i].y * this.imgScale,
          imgList[i].width,
          imgList[i].height
        )
      }
    },
    // 绘制移动的图片
    drawCanvasSensorImg () {
      let imgList = []
      if (this.windowlen) {
        for (let i = 0; i < this.canvasSensorImg.length; i++) {
          let img = new Image()
          let sensorImg = this.canvasSensorImg[i]
          img.src = sensorImg.url
          let imgs = {}
          imgs.img = img
          imgs.x = (sensorImg.x / 5) * 4
          imgs.y = (sensorImg.y / 5) * 4
          imgs.width = sensorImg.width
          imgs.height = sensorImg.height
          imgList.push(imgs)
        }
        this.drawImg(imgList)
        return
      }
      for (let i = 0; i < this.canvasSensorImg.length; i++) {
        let img = new Image()
        let sensorImg = this.canvasSensorImg[i]
        img.src = sensorImg.url
        let imgs = {}
        imgs.img = img
        imgs.x = sensorImg.x
        imgs.y = sensorImg.y
        imgs.width = sensorImg.width
        imgs.height = sensorImg.height
        imgList.push(imgs)
      }
      this.drawImg(imgList)
    },
    //判断鼠标是否在图标范围内,并返回下标
    isMouseInIcon (e, imgList) {
      let x = e.offsetX
      let y = e.offsetY
      for (let i = 0; i < imgList.length; i++) {
        let imgX = imgList[i].x * this.imgScale
        let imgY = imgList[i].y * this.imgScale
        let imgWidth = imgList[i].width
        let imgHeight = imgList[i].height
        if (
          x > imgX &&
          x < imgX + imgWidth &&
          y > imgY &&
          y < imgY + imgHeight
        ) {
          return i
        }
      }
      return -1
    },
    // 定时器刷新画布
    dataRefreh () {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.loadBgImg()
      }, this.frameNumber)
    },
    //鼠标点击触发事件
    canvasMouseDown (e) {
      console.log('鼠标点击', e)
      this.isClick = true
      //先判断鼠标是否在需要移动的图标中，再判断是否在固定图标中
      this.index = this.isMouseInIcon(e, this.canvasSensorImg)

      // 选中背景图
      if (this.index == -1) {
        console.log('没选中')
        return
      }
      // 找到当前点击的图标
      console.log('当前点击的图标下标', this.index)
      console.log('当前点击的图标', this.canvasSensorImg[this.index])
      this.$nextTick(() => {
        console.log('top')
        // 设备详细信息
        const canpro = document.getElementById('popovercan')
        console.log('canpro', canpro)
        canpro.style.position = 'absolute'
        // 弹出框宽度 - 图标的宽度 - 父元素内边距
        canpro.style.top =
          this.canvasSensorImg[this.index].y * this.imgScale - 30 + 'px'
        canpro.style.left =
          this.canvasSensorImg[this.index].x * this.imgScale +
          this.newValsidebar -
          60 +
          'px'
        // 打开图标详细信息
        this.canvasvisible = !this.canvasvisible

        // 抱紧闪光特效
        const canflash = document.getElementById('flash-box')
        console.log('canflash', canflash)
        canflash.style.position = 'absolute'
        canflash.style.top =
          this.canvasSensorImg[this.index].y * this.imgScale + 46 + 'px'
        canflash.style.left =
          this.canvasSensorImg[this.index].x * this.imgScale +
          this.newValsidebar +
          20 +
          'px'

        // 打开效果开关
        this.flashswtich = !this.flashswtich
      })
    },
    //鼠标移动触发事件
    canvasMouseMove (e) {
      //如果未点击则不触发该事件
      if (!this.isClick) {
        return
      }
      //index为-1则点击中的为图标
      if (this.index != -1) {
        // 关闭弹出框信息
        // this.canvasvisible = false
        return
      }
    },
    //鼠标抬起触发事件
    canvasMouseUp (e) {
      // 是否点击
      this.isClick = false
      // 是否选中图标
      // this.index = -1
      //关闭图标信息
      // this.canvasvisible = false
    },
    //滚轮滑动事件
    canvasMouseWhell (e) {
      // 关闭设备信息和动画
      this.canvasvisible = false
      this.flashswtich = false
      let deltaY = e.deltaY
      if (deltaY < 0) {
        this.imgScale = this.imgScale + 0.1
      } else {
        if (this.imgScale <= 1.0) {
          console.log('执行了')
          this.backgroundImg.x = 0
          this.backgroundImg.y = 0
          return
        }
        this.imgScale = this.imgScale - 0.1
      }
    },
    // 付费功能
    swtichtablefaults () {
      this.istablefaults = !this.istablefaults
    }
  },
  beforeDestroy () {
    // 在页面销毁后，清除计时器
    clearInterval(this.intervalId) //清除计时器
    this.intervalId = null //设置为null
    // 离开页面是清空
    this.windowlen = false
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 815px;
  // border: 1px solid #ccc;
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 15px;
    // margin-bottom: 50px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .grid-left {
    padding: 30px 20px 20px;
    min-height: 815px;
    border: 1px solid #ccc;
    // background-color: skyblue;
    // 输入框
    .searchinput {
      margin-bottom: 20px;
    }
  }
  .grid-right {
    // width: 1363px;
    width: 100%;
    height: 815px;
    padding: 30px 20px 20px;
    // border-left: 1px solid #2485ab;
    // border-right: 1px solid #2485ab;
    border: 1px solid #ccc;
    position: relative;
    // 画布模块
    .canvas-box {
      width: 1358px;
      height: 590px;
      padding: 2px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -68%);
      cursor: pointer;
      .canvas-title {
        display: flex;
        height: 30px;
        // background-color: skyblue;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 5px;
        .zuo {
          font-size: 16px;
          font-family: '楷体', '楷体_GB2312';
          //   font-family: '楷体';
          font-weight: 700;
          display: flex;
          i {
            display: block;
            width: 3px;
            height: 19px;
            background-color: black;
            background-color: #409eff;
            border-radius: 2px;
            margin-right: 5px;
          }
          p {
            font-style: normal;
            color: #333;
            //font-size: 20px;
            font-size: 16px;
            font-weight: bold;
            margin: 0;
          }
        }
        .button-dispose {
          margin-left: 50px;
          flex: 1;
          // background-color: skyblue;
        }
      }
      #canvas-boxitem {
        width: 1355px;
        height: 525px;
        // 画布
        canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 设备弹出框
    ::v-deep .el-popover {
      // background-color: skyblue;
      padding: 0;
      .popover-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .popover-title {
          width: 30px;
          height: 35px;
          cursor: pointer;
          background-color: #e72528;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0 5px 0 0;
          i {
            font-size: 25px;
          }
        }
        i {
          font-style: normal;
          // font-size: 20px;
        }
      }
      p {
        margin: 3px 0;
      }
    }
    // 闪光特效
    .flashbox {
      width: 35px;
      height: 35px;
      cursor: pointer;
      // background-color: red;
      animation: flash 0.5s infinite alternate;
      border-radius: 50%;
    }
    // 动画
    @keyframes flash {
      from {
        opacity: 1;
        transform: scale(1);
      }
      to {
        opacity: 0.5;
        transform: scale(1.2);
      }
    }
    // 报警信息
    .table-fault {
      width: 100%;
      height: 814px;
      padding: 5px;
      // background-color: skyblue;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      transition: all 4s;
      position: absolute;
      top: 0;
      bottom: 1px;
      z-index: 9999;
      left: 0;
      // 控制框
      .fault-icon {
        width: 30px;
        height: 22px;
        position: absolute;
        background-color: yellow;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px 15px 0 0;
        z-index: 999;
        cursor: pointer;
        i {
          font-size: 25px;
        }
      }
    }
    // 变化样式
    .tablefaults {
      top: 557px;
      height: 257px;
    }
    // 搜索
    .search {
      margin: 0;
      height: 30px;
      // background-color: skyblue;
    }
    // 表格信息
    .table {
      height: calc(100% - 60px);
      width: 100%;
      ::v-deep .el-table {
        .el-table__fixed,
        .el-table__fixed-right {
          height: calc(100% - 5px) !important;
        }
      }
      ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        height: 5px;
      }
      // 设置滚动条的背景色和圆角
      ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #808080;
        border-radius: 5px;
      }
    }
  }
}
</style>
